<!-- components/QrCodeGenerator.vue 形成小程序码-->
<template>
	<view class="qrcode-container">
		<!-- 显示生成的小程序码 -->
		<!-- <image :src="qrcode" mode="widthFix" class="qrcode-image" v-if="qrcode" /> -->

		<!-- 生成按钮 -->
		<!-- <button @click="fetchQrCode" :disabled="loading" class="generate-btn">
			{{ loading ? '生成中...' : '生成小程序码' }}
		</button> -->
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	// 定义 props
	const props = defineProps({
		// 小程序页面路径
		page: {
			type: String,
			default: 'pages/index/index'
		},
		// scene 参数，可以是字符串或对象
		scene: {
			type: [String, Object],
			required: true
		},
		// 是否自动配色
		autoColor: {
			type: Boolean,
			default: true
		},
		// 颜色值（当 autoColor 为 false 时使用）
		color: {
			type: Object,
			default: () => ({
				r: 0,
				g: 0,
				b: 0
			})
		},
		// 环境版本
		envVersion: {
			type: String,
			default: 'release',
			// 'release'
		},
		// 二维码宽度
		width: {
			type: Number,
			default: 430
		}
	})

	// 定义 emit 事件
	const emit = defineEmits(['success', 'error', 'loading'])

	// 响应式数据
	const qrcode = ref('')
	const loading = ref(false)
	const STR_URL = ref('https://min.erkantv.cn:443')
	const LOCAL_URL = ref('http://localhost:443')

	/**
	 * 将 Base64 字符串转换为临时文件路径
	 * @param {string} base64Data - Base64 数据（可带 data:image/png;base64, 或不带）
	 * @returns {Promise<string>} 本地文件路径
	 */


	/**
	 * 生成小程序码
	 */
	const clearOldTempFiles = async () => {
	      return new Promise((resolve, reject) => {
	        const fs = uni.getFileSystemManager();
	        fs.readdir({
	          dirPath: uni.env.USER_DATA_PATH,
	          success: (res) => {
	            res.files.forEach(file => {
	              if (file.startsWith('qrcode_')) {
	                fs.unlink({
	                  filePath: `${uni.env.USER_DATA_PATH}/${file}`,
	                  fail: err => console.error('删除文件失败:', err)
	                });
	              }
	            });
	            resolve();
	          },
	          fail: err => reject(err)
	        });
	      });
	    };
	
	    const base64ToTempFilePath = (base64Data) => {
	      return new Promise((resolve, reject) => {
	        const base64 = base64Data.split(',')[1];
	        if (!base64) return reject(new Error('Invalid base64'));
	
	        const fs = uni.getFileSystemManager();
	        // ✅ 文件名带上时间戳
	        const filePath = `${uni.env.USER_DATA_PATH}/qrcode_${Date.now()}.png`;
	
	        try {
	          const buffer = uni.base64ToArrayBuffer(base64);
	          fs.writeFile({
	            filePath,
	            data: buffer,
	            encoding: 'binary',
	            success: () => resolve(filePath),
	            fail: err => reject(err)
	          });
	        } catch (err) {
	          reject(err);
	        }
	      });
	    };
	
	    const fetchQrCode = async () => {
	      if (loading.value) return; // 防止重复点击
	
	      loading.value = true;
	      emit('loading', true);
	
	      try {
	        // 构造 scene 参数
	        let sceneStr = '';
	        if (typeof props.scene === 'string') {
	          sceneStr = props.scene;
	        } else if (typeof props.scene === 'object') {
	          sceneStr = Object.entries(props.scene)
	              .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
	              .join('&')
	              .substring(0, 32);
	        } else {
	          throw new Error('scene 参数必须是字符串或对象');
	        }
	
	        console.log('请求参数:', {
	          page: props.page,
	          scene: sceneStr,
	          autoColor: props.autoColor,
	          color: props.color,
	          envVersion: props.envVersion,
	          width: props.width
	        });
	
	        // 👇 构建请求数据对象，根据 autoColor 决定是否包含颜色参数
	        const requestData = {
	          page: props.page,
	          scene: sceneStr,
	          autoColor: props.autoColor,
	          isHyaline: false,
	          envVersion: props.envVersion,
	          width: props.width
	        };
	
	        // 只有当 autoColor 为 false 时，才添加 r, g, b 参数
	        if (!props.autoColor) {
	          requestData.r = props.color.r;
	          requestData.g = props.color.g;
	          requestData.b = props.color.b;
	        }
	
	        const response = await uni.request({
	          url: 'https://min.erkantv.cn:443/api/wxacode/unlimit',
	          method: 'GET',
	          data: requestData, // 👈 使用构建好的对象
	          responseType: 'arraybuffer'
	        });
	
	        console.log('响应状态码:', response.statusCode);
	        console.log('响应数据:', response.data);
	
	        // 检查并处理响应
	        if (response.statusCode === 200) {
	          await clearOldTempFiles();
	          // 成功获取二维码图片
	          const base64 = uni.arrayBufferToBase64(response.data);
	          const imageData = `data:image/png;base64,${base64}`;
	
	          console.log('Base64 图像数据:', imageData); // 添加日志
	
	          qrcode.value = imageData;
	          const filePath = await base64ToTempFilePath(imageData);
	          emit('success', filePath);
	
	          uni.showToast({
	            title: '生成成功',
	            icon: 'success'
	          });
	
	          return filePath; // 返回临时文件路径
	        } else {
	          // 处理错误响应
	          let errorMsg = `请求失败: ${response.statusCode}`;
	
	          try {
	            const text = new TextDecoder().decode(response.data);
	            const errorData = JSON.parse(text);
	            errorMsg = errorData.message || errorData.error || errorMsg;
	          } catch (e) {
	            console.warn('无法解析错误信息');
	          }
	
	          emit('error', new Error(errorMsg));
	          uni.showToast({
	            title: `错误: ${errorMsg}`,
	            icon: 'none',
	            duration: 3000
	          });
	        }
	      } catch (err) {
	        console.error('生成小程序码失败:', err);
	        emit('error', err);
	        uni.showToast({
	          title: `生成失败: ${err.message || '未知错误'}`,
	          icon: 'none'
	        });
	      } finally {
	        loading.value = false;
	        emit('loading', false);
	      }
	    };


		// 暴露给父组件的方法
		defineExpose({
			fetchQrCode,
			qrcode
		})
</script>

<style scoped>
	.qrcode-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 0;
	}

	.qrcode-image {
		width: 200px;
		margin: 20px auto;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.generate-btn {
		margin-top: 10px;
		padding: 10px 20px;
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 20px;
		font-size: 14px;
	}

	.generate-btn:disabled {
		background-color: #ccc;
	}
</style>